<template>
  <view class="">
    <tTable>
      <!-- 表头 -->
      <t-tr>
        <t-th>
          转债
        </t-th>
        <t-th>
          现价
        </t-th>
        <t-th>
          转股值
        </t-th>
        <t-th>
          溢价率
        </t-th>
        <t-th>
          双低
        </t-th>
        
      </t-tr>
      
      <!-- 表格内容 -->
      <!-- v-if="item.force_redeem" 如果后端没处理强赎字段 -->
      <t-tr v-for="(item, index) in dbLowList" :key='item.bond_id'  :class="{'has-stock': item.hasStock,
        'need-go-out': item.hasStock && index >10
        }">
        <t-td>
          <!-- 名字，代码 -->
          <text>
            {{item.bond_nm.replace('转债','')}}
            {{item.bond_id}}
          </text>
        </t-td>
        <t-td>
          <!-- 现价和涨跌幅 -->
            <text :class="item.increase_rt.replace('%','') >= 0?'full-price__upper': 'full-price__lower'">
              {{item.full_price}}
              {{item.increase_rt}}
            </text>
        </t-td>
        <t-td>
          <!-- 转股价值 -->
          {{item.convert_value}}
        </t-td>
        <t-td>
          <!-- 溢价率 -->
          {{item.premium_rt}}
        </t-td>
        <t-td>
          <!-- 双低 -->
          {{item.dblow}}
        </t-td>
        
      </t-tr>
    </tTable>
  </view>
</template>

<script>
  import tTable from '@/components/t-table/t-table.vue';
  import tTh from '@/components/t-table/t-th.vue';
  import tTr from '@/components/t-table/t-tr.vue';
  import tTd from '@/components/t-table/t-td.vue';
  
  import { createNamespacedHelpers } from 'vuex'
  const { mapState } = createNamespacedHelpers('indexPage')
  
  export default {
    components: {
      tTable,
      tTh,
      tTr,
      tTd
    },
    computed:{
      ...mapState(['dbLowList'])
    }
  }
</script>

<style lang="scss">
  .full-price__upper {
    color: red;
  }
  .full-price__lower {
    color: green;
  }
  .has-stock {
    background-color: skyblue!important;
  }
  
  .need-go-out {
    background-color: orange!important;
  }
</style>
